<template>
  <div class="detail">
    <!-- 标题头部 -->
    <van-nav-bar
      title="新闻正文"
      left-text="返回"
      left-arrow
      fixed
      placeholder
      @click-left="onClickLeft"
    />

    <!-- 新闻标题 -->
    <h2>{{ dataDetail[0].title }}</h2>
    <!-- 轮播图 -->
    <div class="swiper">
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(image, index) in images" :key="index">
          <img v-lazy="image" />
        </van-swipe-item>
      </van-swipe>
    </div>

    <div class="content">
      {{ dataDetail[0].detail }}
    </div>

    <!-- 评论区域 -->
    <div class="talk">
      <div class="comment">
        <div class="comment-list">
          <div
            class="comment-item"
            v-for="(item, index) in comments"
            :key="index"
          >
            <div class="comment-header">
              <div class="comment-avatar">
                <img
                  src="https://img0.baidu.com/it/u=3905825772,3024012927&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1686070800&t=81cb33e865b614d0d7fa147e9580c45b"
                  alt=""
                />
              </div>
              <div class="comment-info">
                <div class="comment-name">{{ item.name }}</div>
                <div class="comment-time">{{ item.time }}</div>
              </div>
            </div>
            <div class="comment-content">{{ item.content }}</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部 -->
    <van-tabbar active-color="#000" inactive-color="#000" placeholder>
      <van-tabbar-item @click="handleLikeClick" class="one" v-if="isLiked"
        ><van-icon name="like" color="red" size="23px" /><span></span
      ></van-tabbar-item>

      <van-tabbar-item @click="handleLikeClick" class="one" v-if="!isLiked"
        ><van-icon name="like-o" size="23px" /><span></span
      ></van-tabbar-item>

      <van-tabbar-item icon="comment-o" @click="goTalk"></van-tabbar-item>
    </van-tabbar>

    <!-- 弹出框 -->
    <van-popup
      v-model="show"
      round
      position="bottom"
      :style="{ height: '40%' }"
    >
      <div class="text">
        <div class="one1">
          <van-field
            v-model="message"
            rows="2"
            autosize
            label="评论"
            type="textarea"
            maxlength="50"
            placeholder="请输入评论"
            show-word-limit
          />
        </div>

        <div class="one2">
          <van-button type="primary" round block @click="postComt"
            >发布</van-button
          >
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { Toast } from "vant"
export default {
  created() {
    // 获取传递过来的id
    this.item_id = this.$route.query.id
    console.log(this.item_id)
    let param = { id: this.item_id }
    this.$api.news.getDetail(param).then((res) => {
      console.log(res)
      this.dataDetail = res.data
      // 获取图片
      let pics = res.pic.map((item) => {
        return item.pic_src
      })
      console.log(pics)
      this.images = pics
    })
  },

  data() {
    return {
      images: [],
      dataDetail: [],
      item_id: "",
      active: 0,
      icon: {
        active: "https://img01.yzcdn.cn/vant/user-active.png",
        inactive: "https://img01.yzcdn.cn/vant/user-inactive.png",
      },
      show: false,
      isLiked: false,
      message: "",
      border: "",
      comments: [
        {
          name: "小明",
          time: "2023-06-04 12:30:12",
          content: "支持国家政策",
        },
        {
          name: "小明",
          time: "2023-06-03 09:20:30",
          content: "做的好呀",
        },
        {
          name: "小明",
          time: "2023-06-02 18:45:00",
          content: "支持，赞一个。",
        },
      ],
    }
  },

  methods: {
    onClickLeft() {
      this.$router.go(-1)
    },
    handleLikeClick() {
      console.log(1)
      this.isLiked = !this.isLiked
    },

    goTalk() {
      this.show = true
    },

    postComt() {
      // 1获取当前时间
      // 创建一个Date对象，获取当前时间
      const date = new Date()
      let obj = {}
      // 获取年、月、日、时、分、秒
      const year = date.getFullYear()
      const month = date.getMonth() + 1 // 月份从0开始，需要加1
      const day = date.getDate()
      const hour = date.getHours()
      const minute = date.getMinutes()
      const second = date.getSeconds()

      // 格式化时间，拼接成字符串
      const timeString = `${year}-${month}-${day} ${hour}:${minute}:${second}`

      console.log(timeString) // 输出当前时间的字符串格式，例如：2023-06-05 04:09:21
      let time = timeString
      obj.time = time
      obj.content = this.message
      this.comments.unshift(obj)
      Toast("发表评论成功")
      this.show = false
    },
  },
}
</script>

<style lang="less" scoped>
.detail {
  padding: 10px;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.content {
  font-family: SimSun, Arial;
  line-height: 1.5;
  font-size: 18px;
}

.liked {
  color: red;
}

.one {
  display: flex;
  flex-direction: column;
}

.text {
  width: 100%;
  height: 100%;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.comment {
  margin-top: 20px;
  padding: 10px;
}

.comment-list {
  border: 1px solid #ebedf0;
  border-radius: 4px;
  padding: 10px;
}

.comment-item {
  border-bottom: 1px solid #ebedf0;
  padding-bottom: 10px;
  margin-bottom: 10px;
}

.comment-header {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}

.comment-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #ccc;
  margin-right: 10px;
}

.comment-info {
  font-size: 14px;
  color: #666;
}

.comment-name {
  margin-right: 10px;
}

.comment-time {
  color: #999;
}

.comment-content {
  margin-top: 10px;
  line-height: 1.5;
  font-size: 16px;
  color: #333;
}

.comment-form {
  margin-top: 20px;
}
</style>
